<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <th:block th:include="include :: header('新增测点')"/>
</head>
<body class="white-bg">
<div class="wrapper wrapper-content animated fadeInRight ibox-content">
    <form class="form-horizontal m" id="form-point-add">
        <div class="form-group">
            <label class="col-sm-3 control-label">风机：</label>
            <div class="col-sm-8">
                <select class="form-control" name="fanId" required>
                    <option value="" style="display: none">请选择</option>
                </select>
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label">测项：</label>
            <div class="col-sm-8">
                <select class="form-control" name="functionId" required>
                    <option value="" style="display: none">请选择</option>
                </select>
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label">测点名称：</label>
            <div class="col-sm-8">
                <input class="form-control" type="text" name="pointName" id="pointName" required>
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label">标高</label>
            <div class="col-sm-8">
                <input class="form-control" type="text" name="height" id="height" required>
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label">采集仪IP</label>
            <div class="col-sm-8">
                <input class="form-control" type="text" name="ip" id="ip" required>
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label">端口</label>
            <div class="col-sm-8">
                <input class="form-control" type="text" name="com" id="com" required>
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label">初始值1</label>
            <div class="col-sm-8">
                <input class="form-control" type="text" name="init1" id="init1" required>
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label">初始值2</label>
            <div class="col-sm-8">
                <input class="form-control" type="text" name="init2" id="init2" required>
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label">初始值3</label>
            <div class="col-sm-8">
                <input class="form-control" type="text" name="init3" id="init3" required>
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label">初始值设置时间</label>
            <div class="col-sm-8">
                <input class="form-control" type="text" name="initTime" id="initTime" required>
            </div>
        </div>
        <!--			<div class="form-group">-->
        <!--				<label class="col-sm-3 control-label">测点状态：</label>-->
        <!--				<div class="col-sm-8">-->
        <!--				    <div class="radio-box" th:each="dict : ${@dict.getType('sys_normal_disable')}">-->
        <!--						<input type="radio" th:id="${dict.dictCode}" name="isDelete" th:value="${dict.dictValue}" th:checked="${dict.default}">-->
        <!--						<label th:for="${dict.dictCode}" th:text="${dict.dictLabel}"></label>-->
        <!--					</div>-->
        <!--				</div>-->
        <!--			</div>-->
    </form>
</div>
<th:block th:include="include :: footer"/>
<script type="text/javascript">
    // layui 初始化
    layui.use('form', function () {
        var laydate = layui.laydate;

        //初始值设置时间
        laydate.render({
            elem: '#initTime'
            , type: 'datetime'
            , isInitValue: true
        });
    })

    var fandArr = [], functionArr = [], fanId = null, functionId = null;
    var prefix = ctx + "sensor/point";

    $("#form-point-add").validate({
        onkeyup: false,
        rules: {
            pointName: {
                remote: {
                    url: ctx + "sensor/point/checkPointNameUnique",
                    type: "post",
                    dataType: "json",
                    data: {
                        "pointName": function () {
                            return $.common.trim($("#pointName").val());
                        }
                    },
                    dataFilter: function (data, type) {
                        return $.validate.unique(data);
                    }
                }
            },

        },
        messages: {
            "pointName": {
                remote: "测点名称已经存在"
            }
        },
        focusCleanup: true
    });

    function submitHandler() {
        if ($.validate.form()) {
            $.operate.save(prefix + "/add", $('#form-point-add').serialize());
        }
    }

    // 监听项目改变时
    $("[name='fanId']").on("change", function () {
        fanId = $(this).val();
        getCxData(fanId);
    });

    // 监听测项改变时
    $("[name='functionId']").on("change", function () {
        functionId = $(this).val();
    });

    // 获取项目数据
    function getPorjectData() {
        $.ajax({
            url: ctx + "sensor/commom/getFanListForSensor",
            Type: "post",
            dataType: "json",
            async: false,
            success: (data) => {
                fandArr = [...data];
                let str = ""
                data.forEach((item) => {
                    str += `<option value="${item.id}">${item.fanName}</option>`
                })
                $("[name='fanId']").append(str);
                // 自动选择第一条数据并手动触发change事件
                if (data.length > 0) {
                    $("[name='fanId']").val(data[0].id).change();
                }
            },
        })
    }

    // 获取测项数据
    function getCxData(fanId) {
        $.ajax({
            url: ctx + "sensor/commom/getFunctionListForFan",
            Type: "post",
            data: {
                fanId: fanId
            },
            dataType: "json",
            async: false,
            success: (data) => {
                functionArr = [...data];
                let str = ""
                data.forEach((item) => {
                    str += `<option value="${item.id}">${item.name}</option>`
                })
                $("[name='functionId']").find("option").slice(1).remove();
                $("[name='functionId']").append(str);
                // 自动选择第一条数据并手动触发change事件
                if (data.length > 0) {
                    $("[name='functionId']").val(data[0].id).change();
                }
            },
        })
    }

    getPorjectData()
</script>
</body>
</html>
